<template>
  <div id="app" class="building">
    <div class="backgroud-box">
      <div>
        <el-button type="text" class="head-button">上传资源</el-button>
      </div>
      <div><img src="@/assets/image/upload/line.svg" /></div>
      <!-- 文件拖拽区 -->
      <div class="content">
        <div class="drag-area" @dragover="fileDragover" @drop="fileDrop">
          <div class="uploader-tips">
            <span><i>请将需要上传的文件拖拽至虚线框中，或</i></span>
            <label for="fileInput" style="color: #11a8ff; cursor: pointer"
              ><i>点此上传</i></label
            >
            <!-- 点此上传 -->
            <input
              type="file"
              id="fileInput"
              @change="chooseUploadFile"
              style="display: none"
            />
          </div>
          <!-- 图标 -->
          <div style="margin-top: 20px; font-size: 24px; color: #333333">
            支持格式：
            <span style="margin-top: 5px">
              <img
                src="@/assets/image/upload/ppt.png"
                class="icon"
                alt=""
              /><img
                src="@/assets/image/upload/xls.png"
                class="icon"
                alt=""
              /><img
                src="@/assets/image/upload/doc.png"
                class="icon"
                alt=""
              /><img
                src="@/assets/image/upload/pdf.png"
                class="icon"
                alt=""
              /><img
                src="@/assets/image/upload/txt.png"
                class="icon"
                alt=""
              /><img src="@/assets/image/upload/zip.png" class="icon" alt="" />
              <!-- <img
              src="@/assets/image/upload/etc.png"
              class="icon"
              alt=""
            /> -->
            </span>
          </div>
          <!-- 按钮 -->
          <el-button type="primary" class="upload-button" @click="handleUpload"
            ><img
              src="@/assets/image/upload/upload.png"
              style="
                width: 71px;
                height: 70px;
                display: inline-block;
                vertical-align: middle;
              "
            />&ensp;点击上传</el-button
          >
          <div class="black-text" v-if="fileName != null">
            目前待点击上传的资源:
          </div>
          <div class="gray-text" v-if="fileName != null">
            （仅支持每次单份资源的上传）
          </div>
          <div
            v-if="fileName != null"
            style="
              width: 200px;
              position: absolute;
              margin-left: 440px;
              margin-top: -70px;
            "
          >
            <div style="height: 60px; width: 60px; margin: 0 auto">
              <img
                :src="
                  require('@/assets/image/upload/' +
                    matchType(fileName) +
                    '.png')
                "
                alt=""
                style="width: 60px; height: 60px"
              />
            </div>
            <div style="margin-top: 10px; text-align: center">
              <el-tooltip :content="fileName" placement="top">
                <span class="spanStyle">{{ fileName }}</span>
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      batchFile: null,
      fileName: null,
      MAX_FILE_SIZE: 100 * 1000 * 1000,
    };
  },
  methods: {
    handleUpload() {
      if (this.batchFile == null) {
        this.$message({
          type: "warning",
          message: "请选择需要上传的资源",
        });
        return;
      }
      // this.$router.push({
      //   path: "/UploadInstall",
      //   // query: { file: JSON.stringify(this.batchFile) },
      //   query: { file: this.batchFile },
      // });
      this.$router.push({
        name: "UploadInstall",
        // query: { file: JSON.stringify(this.batchFile) },
        params: { file: this.batchFile },
      });
    },
    //判断文件类型
    matchType(fileName) {
      //后缀获取
      var suffix = "";
      //获取类型结果
      var result = "";
      try {
        var fileArr = fileName.split(".");
        suffix = fileArr[fileArr.length - 1];
      } catch (err) {
        suffix = "";
      }
      //匹配txt
      var txtlist = ["txt"];
      result = txtlist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "txt";
        return result;
      }
      //匹配doc
      var doclist = ["doc", "docx"];
      result = doclist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "doc";
        return result;
      }
      //匹配pdf
      var pdflist = ["pdf"];
      result = pdflist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "pdf";
        return result;
      }
      //匹配ppt
      var pptlist = ["ppt", "pptx"];
      result = pptlist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "ppt";
        return result;
      }
      //匹配xls
      var xlslist = ["xls", "xlsx"];
      result = xlslist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "xls";
        return result;
      }
      //匹配zip
      var ziplist = ["zip", "rar"];
      result = ziplist.some(function (item) {
        return item === suffix;
      });
      if (result) {
        result = "zip";
        return result;
      }
      return result;
    },
    // 点击上传
    chooseUploadFile(e) {
      this.batchFile = undefined;
      var files = e.target.files.item(0);
      if (!files) return;
      var suffix = this.matchType(files.name);
      switch (suffix) {
        case "doc":
        case "docx":
        case "xls":
        case "xlsx":
        case "pdf":
        case "ppt":
        case "pptx":
        case "txt":
        case "zip":
        case "rar":
          break;
        default:
          return alert("暂不支持该文件格式");
      }
      if (files.size > this.MAX_FILE_SIZE) {
        return alert("文件大小不能超过100M");
      }
      this.fileName = files.name;
      this.batchFile = files;
      console.log(files);
      console.log(this.batchFile);
      // 清空，防止上传后再上传没有反应
      e.target.value = "";
    },
    // 拖拽上传
    fileDragover(e) {
      e.preventDefault();
    },
    fileDrop(e) {
      e.preventDefault();
      this.batchFile = undefined;
      var files = e.dataTransfer.files[0]; // 获取到上传的文件对象
      if (!files) return;
      var suffix = this.matchType(files.name);
      switch (suffix) {
        case "doc":
        case "docx":
        case "xls":
        case "xlsx":
        case "pdf":
        case "ppt":
        case "pptx":
        case "txt":
        case "zip":
        case "rar":
          break;
        default:
          return alert("暂不支持该文件格式");
      }
      if (files.size > this.MAX_FILE_SIZE) {
        return alert("文件大小不能超过100M");
      }
      this.fileName = files.name;
      this.batchFile = files;
      console.log(files);
      console.log(this.batchFile);
    },
  },
};
</script>
<style lang="less"></style>
<style lang="less" scoped>
.spanStyle {
  display: inline-block;
  width: 150px;
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  white-space: nowrap;
  font-size: 16px;
}
.upload-button {
  margin-top: 20px;
  width: 260px;
  height: 100px;
  background-color: rgba(2, 167, 240, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(121, 121, 121, 1);
  border-radius: 16px;
  font-family: "Arial Black", "Arial Normal", "Arial", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 33px;
  color: #ffffff;
}
.gray-text {
  width: 280px;
  margin-top: 5px;
  margin-left: 230px;
  font-size: 18px;
  color: #bfbfbf;
}
.black-text {
  width: 220px;
  margin-top: 70px;
  margin-left: 260px;
  font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
}
.icon {
  height: 30px;
  width: 30px;
  display: inline-block;
  vertical-align: middle;
}
.uploader-tips {
  text-align: center;
  height: 60px;
  line-height: 100px;
  font-family: "Arial Bold Oblique", "Arial Bold", "Arial Normal", "Arial",
    sans-serif;
  font-weight: 700;
  font-style: oblique;
  font-size: 24px;
  color: #aaaaaa;
}
.drag-area {
  margin-top: -17px;
  display: inline-block;
  text-align: center;
  height: 400px;
  width: 900px;
  border: dashed 1px gray;
  margin-bottom: 10px;
  color: rgb(61, 60, 60);
}
.head-button {
  margin-top: 10px;
  font-size: 40px;
  color: #02a7f0;
}
.backgroud-box {
  margin-top: 50px;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  height: 550px;
  width: 1100px;
  border-radius: 6px;
  transition-duration: 0.9s;
  -webkit-transition-duration: 0.9s;
  background-color: white;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.349019607843137);
}
.building {
  background: url("@/assets/image/upload/background.jpg");
  background-size: 100% 100%;
  background-repeat: "no-repeat";
  width: 100%;
  min-height: 100vh;
}
</style>
